<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="main" style="width: 1000px;height:800px;"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=TCWtwqPWaVGhSnTaGmzn0IxrGHaMUtjG"></script>
<script src="js/echarts/echarts.min.js"></script>
<script src="js/echarts/extension/bmap.min.js"></script>
<script>
    var area = '肇东市';

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    /**
     * 查询数据
     */
    function querydata() {
        axios.post('/poi/list', {
            area: area
        })
            .then(function (response) {
                if (response.status == 200) {
                    if (null != response.data) {
                        var poiList = [];
                        response.data.forEach(function (poi, index) {
                            poiList.push({
                                name: poi.name,
                                value: [poi.location.lng, poi.location.lat]
                            });
                        });
                        drawMap(poiList);
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    /**
     * 绘制坐标点
     * @param poiList
     */
    function drawMap(poiList) {
        // 获取地图的中心点
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(area, function (point) {
            if (point) {
                myChart.setOption(option = {
                    title: {
                        text: area + '加油站分布图',
                        // subtext: '百度地图',
                        // sublink: 'http://www.pm25.in',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [point.lng, point.lat],
                        zoom: 11,
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                'featureType': 'water',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#d1d1d1'
                                }
                            }, {
                                'featureType': 'land',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#f3f3f3'
                                }
                            }, {
                                'featureType': 'railway',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'highway',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#fdfdfd'
                                }
                            }, {
                                'featureType': 'highway',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'arterial',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#fefefe'
                                }
                            }, {
                                'featureType': 'arterial',
                                'elementType': 'geometry.fill',
                                'stylers': {
                                    'color': '#fefefe'
                                }
                            }, {
                                'featureType': 'poi',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'green',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'subway',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'manmade',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#d1d1d1'
                                }
                            }, {
                                'featureType': 'local',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#d1d1d1'
                                }
                            }, {
                                'featureType': 'arterial',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }, {
                                'featureType': 'boundary',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#fefefe'
                                }
                            }, {
                                'featureType': 'building',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#d1d1d1'
                                }
                            }, {
                                'featureType': 'label',
                                'elementType': 'labels.text.fill',
                                'stylers': {
                                    'color': '#999999'
                                }
                            }]
                        }
                    },
                    series: [
                        {
                            name: '加油站',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: poiList,
                            symbolSize: function (val) {
                                return 10;
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'bottom',
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'purple'
                                }
                            }
                            /*},
                            {
                                name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'bmap',
                                data: convertData(data.sort(function (a, b) {
                                    return b.value - a.value;
                                }).slice(0, 6)),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'purple',
                                        shadowBlur: 10,
                                        shadowColor: '#333'
                                    }
                                },
                                zlevel: 1*/
                        }
                    ]
                });
            }
        }, area);
    }

    querydata();
</script>
</html>
